@font-face {
  font-family: 'font25';
  src: url('Thraumrien.woff2') format('woff2');
}

.Thraumriensample{
    font-family: 'font25';
    font-size: 50px;
}

.div{
    outline-color: rgb(27, 13, 137);
}
#infobox {
    display: none;
    position: absolute;
  background-color: hwb(210 28% 0%);
  border: 3px solid #000000;
  padding: 15px;
  box-shadow: 0 4px 80px rgba(0,1,0,0.3);
  border-radius: 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 200px;
  z-index: 14;
  transform-origin: top left;
  animation: infobox-expand 0.5s ease-in-out 1;
}
@keyframes infobox-expand {
  0% { transform: scale(0);}
  50% { transform: scale(1.2);}
  100% { transform: scale(1);}
}
@keyframes buttonpulse {
  0% { transform: scale(1); border-color: #1f0ba0;}
  50% { transform: scale(1.2); border-color: #ae88ff; color: #9d96ff;} 
  100% { transform: scale(1); border-color: #1f0ba0;}
}

.buttonn {
  padding: 2px 11px;
  background-color: transparent;
  border-radius: 100px;
  border: 3px solid hsl(248, 87%, 34%);
  border-bottom-left-radius: 75px;
  cursor: pointer;
  font-size: 20px;
  border-spacing: 1px;
  animation: buttonpulse 3s ease-in-out infinite;
}